<template>
  <view class="buy-price-list" :class="{ darkStyle: theme == 'dark' }">
    <view class="list-wrapper">
      <view class="buy-price-main" v-if="status === 3 || status === 1">
        <scroll-view scroll-y="true" class="buy-price-scroll" :scroll-top="scrollTop">
          <view
            class="buy-price-item buy-price-item-sell"
            v-for="(outItem, index) in outList"
            :key="index"
            @click="onClickBuyItem(outItem)"
          >
            <view
              class="buy-price-bg red"
              :style="{ width: getWidth(outItem.amount, outItem.sum) + '%' }"
            ></view>
            <view class="item-price">
              {{ $utils.priceToFixed(outItem.price) }}
            </view>
            <view class="item amount">
              {{ outItem.amount }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="buy-price-center" v-if="status === 1">
        <view class="item-price" :class="{ up: isUp, down: isDown }">
          {{ $utils.priceToFixed(price) }}
        </view>
        <view class="item-label"> </view>
      </view>
      <view class="buy-price-main" v-if="status === 2 || status === 1">
        <scroll-view scroll-y="true" class="buy-price-scroll">
          <view
            class="buy-price-item up"
            v-for="(inItem, index) in inList"
            :key="index"
            @click="onClickBuyItem(inItem)"
          >
            <view
              class="buy-price-bg green"
              :style="{ width: getWidth(inItem.amount, inItem.sum) + '%' }"
            ></view>
            <view class="item-price">
              {{ $utils.priceToFixed(inItem.price) }}
            </view>
            <view class="item amount">
              {{ inItem.amount }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="line-wrapper">
      <view class="change-status" @click="onChangeStatus">
        <image
          :src="currentStatusItem.icon"
          mode="widthFix"
          class="change-status-icon"
        ></image>
        <ex-icons name="arrowDown" width="16" height="9"></ex-icons>
        <view class="change-status-popup" v-if="showStatusSwitch" @click.stop>
          <view
            v-for="(item, index) in statusList"
            :key="index"
            class="change-status-popup-item"
            :data-status="item.statusId"
            :class="{ active: item.statusId === status }"
            @click="onItemClick"
          >
            <image :src="item.icon" class="change-status-icon"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ExIcons from "@/components/basic/ExIcons";
import { mathToFixed } from "@/utils/math.js";

export default {
  components: { ExIcons },
  name: "BuyPriceList",
  props: {
    inList: { type: Array, default: () => [] },
    outList: { type: Array, default: () => [] },
    inSum: { type: Number, default: 1 },
    outSum: { type: Number, default: 1 },
    // price: { type: Number | String, default: 0 },
    market_price: { type: Object, default: () => Object.create({}) },
  },
  data() {
    return {
      // 3种状态，status == 1：显示in + out两个列表
      // status == 2 || 3， 显示in || out 列表
      showStatusSwitch: false,
      status: 1,
      scrollTop: 1000,
      statusList: [
        {
          statusId: 1,
          icon: require("@/static/images/trading/icon_tbt@2x.png"),
        },
        {
          statusId: 2,
          icon: require("@/static/images/trading/icon_tbtt@2x.png"),
        },
        {
          statusId: 3,
          icon: require("@/static/images/trading/icon_tbttt@2x.png"),
        },
      ],
    };
  },
  computed: {
    price() {
      return this.market_price.close || "0.0000";
    },
    isDown() {
      return (
        Number(this.market_price?.open) - Number(this.market_price?.close) > 0
      );
    },
    isUp() {
      return (
        Number(this.market_price?.open) - Number(this.market_price?.close) < 0
      );
    },
    currentStatusItem() {
      return this.statusList.find((item) => item.statusId === this.status);
    },
  },
  mounted() {
    uni.$once('outlist-loaded', () => {
      setTimeout(() => {
        this.scrollTop = 200000;
      }, 200)
      // this.queryOutlistInfo();
    })
  },
  methods: {
    // queryOutlistInfo() {
    //   const query = uni.createSelectorQuery().in(this);
    //   query.select('.buy-price-main').boundingClientRect(data => {
    //     console.log(data);
    //     // const lastData = data.slice(data.length - 1)
    //     // console.log("得到布局位置信息" + JSON.stringify(lastData));
    //     // console.log("节点离页面顶部的距离为" + lastData.top);
    //   }).exec();
    // },
    onItemClick(e) {
      this.status = e.currentTarget.dataset.status;
      this.onChangeStatus();
    },
    getWidth(amount, sum) {
      // return parseInt(Math.random() * 100);
      if (typeof amount == "string") {
        amount = Number(amount);
      }
      if (typeof sum == "stirng") {
        sum = Number(sum);
      }
      let result = ((amount / sum) * 100).toFixed(0);
      return result;
    },
    onChangeStatus() {
      this.showStatusSwitch = !this.showStatusSwitch;
    },
    onClickBuyItem(item) {
      this.$emit("onClick", item);
    },
  },
};
</script>

<style lang="less" scoped>
.buy-price-list {
  .list-wrapper {
    display: flex;
    height: 700rpx;
    flex-direction: column;
    .buy-price-main {
      flex-grow: 1;
    }
    .buy-price-center {
      flex-shrink: 0;
    }
  }
  .line-wrapper {
    display: flex;
    margin-top: 31rpx;
    .change-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48rpx;
      width: 110rpx;
      border-radius: 10rpx;
      padding: 9rpx 21rpx;
      background-color: var(--input-background);
      position: relative;
      &::after {
        overflow: hidden;
      }
      .change-status-icon {
        flex-shrink: 0;
        width: 38rpx;
        height: 28rpx;
      }
      .change-status-popup {
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0;
        z-index: 500;
        border-radius: 10rpx;
        background-color: var(--input-background);
        &-item {
          padding: 10rpx 20rpx;
        }
        &.active {
        }
      }
    }
  }
  .buy-price-head {
    display: flex;
    justify-content: space-between;
    .price-head-item {
      font-size: 24rpx;
      transform: scale(0.8);
      color: #b8bbd3;
      height: 44rpx;
      line-height: 44rpx;
    }
  }
  .buy-price-main {
    overflow: hidden;
    // overflow-y: auto;
    .buy-price-scroll {
      height: 100%;
    }
  }
  .buy-price-item {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    justify-content: space-between;
    font-family: "DIN-Medium";
    height: 44rpx;
    padding-right: 30rpx;
    position: relative;
    box-sizing: border-box;
    .buy-price-bg {
      position: absolute;
      right: 0;
      height: 100%;
      transition: width 0.3s;
      &.green {
        background-color: #19ab62;
      }
      &.red {
        background-color: #ee4e55;
      }
      opacity: 0.2;
      z-index: 0;
    }
    .item-price {
      color: var(--down-color);
    }
    &.up {
      .item-price {
        color: var(--up-color);
      }
    }
  }

  .buy-price-center {
    padding: 29rpx 0;
    .item-price {
      font-weight: bold;
      color: var(--text-color-3);
      &.up {
        color: var(--up-color);
      }
      &.down {
        color: var(--down-color);
      }
    }
    .item-label {
      color: #6f728d;
      font-size: 24rpx;
    }
  }
}
</style>
